/*注释:如果编写注释报错，参考：http://www.tuicool.com/articles/f2YVRv */
//这种注释不会出现在生成的css文件中
/*这种注释会出现在生成的css文件中*/


/****************变量的使用********************/
//第一种情况：作为值
$color:red;
$color:blue !default; //如果没有!default，会报错，不能重复声明。 如果没有上一行的声明，$color将使用blue作为默认值
#first{
  background-color: $color;
}
//第二种情况：作为属性
$borderDirection: top;
$baseFontSize: 12px;
$baseLineHeight: 1.5;
#border{
    border-#{$borderDirection}:1px solid #ccc;
}
body{
  font: #{$baseFontSize}/#{$baseLineHeight};
}
//第三种情况:变量中的下划线和中划线属于同一个值
$link-color:blue;
a{
  color:$link_color;
}
//第四种情况：值可以是list(用空格或者,隔开)，也可以至map  (可以使用@each进行遍历list和map， 也可以对指定位置进行访问..)
$basic-border: 1px solid black;
#border{
  border: $basic-border;
}

//@each循环变量：list或map
$var-list: red,blue,green; //也可以使用red blue green
@each $color in $var-list{
  .#{$color}-title{
    color:$color;
  }
}
$var-map:(h1:2em, h2:4em, h3:8em);
@each $header,$size in $var-map{
  #{$header}{
    font-size: $size;
  }
}


//@for循环: 1 through 3 则1,2,3； 如果使用1 to 3, 则1,2
@for $i from 1 through 3{
  h#{$i}{
    font-size: $i*10px;
  }
}




/************嵌套scss： &表示父元素选择器************/
//普通嵌套
.nav{
  ul{  //.nav ul
      margin:0;
  }
  a{   //.nav a
    text-decoration: none;
    &:hover{   //.nav a:hover
      color: #ddd;
    }
  }
}
//嵌套过程也可以使用层级选择器：A,B(A和B)  A B(A后代元素B)、 A>B(A子元素B)、  A+B(A相邻兄弟B)、  A~B(A兄弟B)
.contain{
  h1,h2,h3{  //.contain h1, .contain h2, .contain h3
    margin: 0;
  }
}


/************导入scss,如：使用@import "ScssFile"
   也可以作为某个选择器的后代选择器导入， 如： .blue{@import "ScssFile"}*****************/



/*混合器：使用@mixin定义，使用@include引用，*/
@mixin mi($color:red){  //如果不指定color，默认值是red
  color:$color;
  li{
    list-style-type: none;
    margin-left: 0px;
  }
}
body{
  @include mi(blue);
}


/*继承：关键字@extend， 不过博客建议使用mixin，以为经过压缩之后的文件mixin会比较小(但是没有压缩的话，使用@extend的文件比较小)*/
.message{
  bodrer: 1px solid #ccc;
}
.success{
  @extend .message;  //相当于.message里面的代码放在这里
  border-color: green;
}
/*占位符%（结合extend使用）： 使用%，如果定义的选择器没有调用就不会生成css样式，减少空间*/
%useful{
  border-color: #00aeef;
}
%userless{  //这个没有使用，生成css文件里面没有这段样式代码。
  border-bottom-color: #00aeef;
}
.success{
  @extend %useful;
}




/*函数：关键字@function */
$baseFontSize: 10px !default;;
@function functionTest($px){
  @return $px/$baseFontSize * 1rem;
}
body{
  font-size: functionTest(10px);  //注意要写单位px
}



/*数值计算*/
body{
  font-size: 10/2*3;  //15
}


/*判断： 关键字@if和@else*/
$type: test2;
p{
  @if $type==test1 {
    color:blue;
  }@else if $type==test2 {
    color:red;
  }@else {
    color:yellow;
  }
}
//三目判断
p{
  text-decoration-color: if(($type==test2), red, blue );
}